﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OrderSupport.aspx.cs" Inherits="OrderSupport" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Order Support</title>
    <link rel="stylesheet" type="text/css" href="avantoClassic/css/2444a6c75c026683184e1ebf7a3c4941.css"
        media="all" />
    <script src="JS/Plugins/jquery-1.9.1.js" type="text/javascript"></script>
    <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="JS/1.10.1-jquery-ui.js" type="text/javascript"></script>
    <link href="CSS/Jquery-ui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .divrow
        {
            margin-top: 15px;
            margin-left: 20px;
            margin-bottom: 10px;
        }
        .divlbl
        {
            float: left;
            width: 150px;
            border-color: #404040;
            border-width: 1px;
        }
        #accordion .ui-accordion-content
        {
            width: auto;
            background-color: #FFFFFF;
            color: #777;
            font-size: 10pt;
            line-height: 16pt;
        }
        #accordion .ui-accordion-header
        {
            background-color: #3366FF;
            margin: 0px;
            color: White;
        }
    </style>
    <script type="text/javascript">

        function fetchOrderDetails() {

            var jData = {};
            jData.OrderID = $('#orderID').val();


            $.ajax({
                type: "POST",
                url: "OrderService.svc/fetchOrder",
                data: JSON.stringify(jData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var Result = eval('(' + response.d + ')');
                    $('#fetchcustomer').html(Result["customerName"]);
                    $('#fetchproduct').html(Result["orderedItems"]);
                    $('#fetchstatus').html(Result["STATUS"]);

                },
                failure: function (msg) {
                    alert(msg);
                },
                error: function (jqXHR, exception) {
                    if (jqXHR.status === 0) {
                        alert('Not connect.\n Verify Network.');
                    } else if (jqXHR.status == 404) {
                        alert('Requested page not found. [404]');
                    } else if (jqXHR.status == 500) {
                        alert('No such Orders.');
                    } else if (exception === 'parsererror') {
                        alert('Requested JSON parse failed.');
                    } else if (exception === 'timeout') {
                        alert('Time out error.');
                    } else if (exception === 'abort') {
                        alert('Ajax request aborted.');
                    } else {
                        alert('Uncaught Error.\n' + jqXHR.responseText);
                    }
                }

            });
            return false;

        }

    </script>
    <script>
        $(function () {
            $("#accordion").accordion();
        });
    </script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#OpenDialog').click(function () {

                $('#dialog').dialog({

                    modal: true, height: 180, width: 300

                });

            });

        });

    </script>

</head>
<body>
    <div class="wrapper">
        <div class="page">
            <div class="header-container">
                <div class="header">
                    <h2 class="logo">
                        <a href="Home.aspx" class="logo">
                            <img src="avantoClassic/images/logo.gif" alt="Avanto Ecommerce Product"></a></h2>
                    <div class="quick-access">
                        <ul class="links">
                            <%--<li class="first"><a href="#" title="My Account">Login/Register</a></li>--%>
                            <li><a href="Home.aspx" title="My Wishlist" class="top-link-wishlist">Home</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="home_page_header_block">
                <hr />
                <div id="accordion">
                    <h3>
                        Order Status</h3>
                    <div>
                        <div class="divrow">
                            <div class="divlbl">
                                <label id="order">
                                    ENTER ORDER ID</label>
                            </div>
                            <input class="textfield" type="text" name="txtBox" style="" id="orderID" placeholder="ID Here..."
                                required />
                            <input class="btn btn-primary" type="submit" value="SEARCH" style="margin-bottom: 10px;"
                                onclick="return fetchOrderDetails()" />
                        </div>
                        <div id="orderResult" style="margin-top:10px; margin-left: 240px; width: 350px; height: auto;
                        border: 1px #D8D8D8 solid; padding: 3px; top: 3px; position: relative; text-align:left">
                            <div class="divrow">
                                <div class="divlbl">
                                    <label id="lblname">
                                        Customer Name</label>
                                </div>
                                <span id="fetchcustomer"></span>
                                <br />
                            </div>
                            <div class="divrow">
                                <div class="divlbl">
                                    <label id="lblname">
                                        Product ID</label>
                                </div>
                                <span id="fetchproduct"></span>
                                <br />
                            </div>
                            <div class="divrow">
                                <div class="divlbl">
                                    <label id="lblname">
                                        Status</label>
                                </div>
                                <span id="fetchstatus"></span>
                                <br />
                            </div>
                            <a id="OpenDialog" href="#" >List all Status</a>
                            <div id="dialog" title="Order Status" style="display:none">
                            
                            <ul>
                            <li>New</li>
                            <li>Confirmed</li>
                            <li>Processing</li>
                            <li>Shipped</li>
                            <li>Delivered</li>
                            </ul>

                            </div>

                        </div>
                    </div>
                    <h3>
                        Shipping and Delivery</h3>
                    <div>
                        <dl>
                            <dt>How will my item(s) be delivered?</dt>
                            <dd style="text-align: left; margin-top: 20px;">
                                Online - Delivery of your order is subject to the availability of our inventory
                                and the <strong>Cash On Delivery(COD)</strong> Shipment Method . For security reasons,
                                please show proper photo identification when you pick up your order.
                            </dd>
                        </dl>
                    </div>
                    <h3>
                        Coming Soon....</h3>
                    <div>
                        <p>
                           
                        </p>
                        <ul>
                            <li>List item one</li>
                            <li>List item two</li>
                            <li>List item three</li>
                        </ul>
                    </div>
                   
                </div>
            </div>
            <div class="footer-container">
                <div class="footer">
                    <ul class="links">
                        <li class="first"><a href="#" title="Site Map">Site Map</a></li>
                        <li><a href="#" title="Search Terms">Search Terms</a></li>
                        <li><a href="#" title="Advanced Search">Advanced Search</a></li>
                        <li class=" last"><a href="#" title="Contact Us">Contact Us</a></li>
                    </ul>
                    <address>
                        © 2013 Kaizen Technosoft
                    </address>
                </div>
            </div>
        </div>
    </div>

    <div id ="accordian">
    <h3></h3>
    <div>Content g</div>
    <h3></h3>
    <div>Content g</div>
    
    </div>
</body>
</html>
